<template>
  <div class="language-container auto-height-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="8">
        <el-button 
          v-permissions="{
            permission: ['system:language:doAdd']
          }" 
          type="primary" 
          @click="handleAdd" 
          :icon="Plus"
        >新增</el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="16">
        <el-form :inline="true" :model="queryParams">
          <el-form-item style="margin-right: 10px !important;">
            <el-input 
              v-model="queryParams.name" 
              placeholder="请输入语言名称" 
              clearable 
              @keyup.enter="handleQuery" 
            />
          </el-form-item>
          <el-form-item style="margin-right: 10px !important;">
            <el-input 
              v-model="queryParams.code" 
              placeholder="请输入语言代码" 
              clearable 
              @keyup.enter="handleQuery" 
            />
          </el-form-item>
          <el-form-item style="margin-right: 10px !important;">
            <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
              <el-option label="启用" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <div v-permissions="{ permission: ['system:language:getList'] }">
      <el-table v-loading="loading" :data="languageList" border height="100%">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="name" label="语言名称" min-width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="code" label="语言代码" min-width="120" align="center" show-overflow-tooltip />
        <el-table-column label="图标" width="80" align="center">
          <template #default="{ row }">
            <el-image 
              :src="row.icon" 
              style="width: 24px; height: 24px;"
              :preview-src-list="[row.icon]"
            />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="80" align="center" />
        <el-table-column label="默认" width="80" align="center">
          <template #default="{ row }">
            <el-tag :type="row.is_default === 1 ? 'success' : 'info'">
              {{ row.is_default === 1 ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80" align="center">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : 'danger'">
              {{ row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" min-width="160" align="center" show-overflow-tooltip />
        <el-table-column prop="update_time" label="更新时间" min-width="160" align="center" show-overflow-tooltip />
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-button 
                v-permissions="{
                  permission: ['system:language:doEdit']
                }" 
                type="primary" 
                link 
                @click="handleEdit(row)"
                :disabled="row.is_default === 1"
              >编辑</el-button>
              <el-button 
                v-permissions="{
                  permission: ['system:language:doDelete']
                }" 
                type="danger" 
                link 
                @click="handleDelete(row)"
                :disabled="row.is_default === 1"
              >删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 使用语言表单组件 -->
    <language-form
      v-model:visible="dialogVisible"
      :type="dialogType"
      :current-row="currentRow"
      @success="getList"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { getLanguageList, deleteLanguage } from '/@/api/language'
import type { Language, LanguageQuery } from '/@/types/language'
import LanguageForm from './components/LanguageForm.vue'
import { useAclStore } from '/@/store/modules/acl'

const aclStore = useAclStore()

const loading = ref(false)
const total = ref(0)
const languageList = ref<Language[]>([])
const dialogVisible = ref(false)
const dialogType = ref<'add' | 'edit'>('add')
const currentRow = ref<Language | null>(null)

// 查询参数
const queryParams = reactive<LanguageQuery>({})

interface ListResponse {
  list: Language[]
  total: number
}

// 获取列表数据
const getList = async () => {
  // 检查列表权限
  if (!aclStore.getPermission.includes('system:language:getList')) {
    return
  }

  loading.value = true
  try {
    const { data } = await getLanguageList(queryParams) as { data: ListResponse }
    languageList.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

// 查询操作
const handleQuery = () => {
  getList()
}

// 重置操作
const resetQuery = () => {
  queryParams.name = undefined
  queryParams.code = undefined
  queryParams.status = undefined
  handleQuery()
}

// 新增操作
const handleAdd = () => {
  dialogType.value = 'add'
  currentRow.value = null
  dialogVisible.value = true
}

// 编辑操作
const handleEdit = (row: Language) => {
  dialogType.value = 'edit'
  currentRow.value = row
  dialogVisible.value = true
}

// 删除操作
const handleDelete = async (row: Language) => {
  // 检查删除权限
  if (!aclStore.getPermission.includes('system:language:doDelete')) {
    return
  }

  if (row.is_default === 1) {
    ElMessage.warning('默认语言不能删除')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      '确认要删除该语言吗？删除后将无法恢复！', 
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    await deleteLanguage(row.language_id)
    ElMessage.success('删除成功')
    getList()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
    }
  }
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
:deep(.el-button.is-disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}

:deep(.el-space) {
  justify-content: center;
}

.avatar-uploader {
  :deep(.el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);

    &:hover {
      border-color: var(--el-color-primary);
    }
  }
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;
}

.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style> 